<template>
	<div class="conference_registration_page">
		<!-- 步骤条 -->
		<div class="steps_container">
			<div class="steps_wrapper">
				<div class="step_item" :class="{ active: currentStep >= 1, completed: currentStep > 1 }">
					<div class="step_number">1</div>
					<div class="step_label">{{ t('step1') }}</div>
				</div>
				<div class="step_line" :class="{ active: currentStep > 1 }"></div>
				<div class="step_item" :class="{ active: currentStep >= 2, completed: currentStep > 2 }">
					<div class="step_number">2</div>
					<div class="step_label">{{ t('step2') }}</div>
				</div>
				<div class="step_line" :class="{ active: currentStep > 2 }"></div>
				<div class="step_item" :class="{ active: currentStep >= 3 }">
					<div class="step_number">3</div>
					<div class="step_label">{{ t('step3') }}</div>
				</div>
			</div>
		</div>

		<!-- 主要内容区 -->
		<div class="content_wrapper">
			<!-- 左侧：表单区域 -->
			<div class="form_section">
				<!-- 会议信息 -->
				<div class="section_card meeting_info_card">
					<h3 class="section_title">
						<span class="title_icon">📋</span>
						{{ t('registrationInfo') }}
					</h3>
					<div class="meeting_basic_info">
						<div class="info_row">
							<div class="info_label">{{ t('meetingNameLabel') }}：</div>
							<div class="info_value">{{ $getBilingualText(meetingInfo.conference_name) }}</div>
						</div>
						<div class="info_row">
							<div class="info_label">{{ t('meetingTimeLabel') }}：</div>
							<div class="info_value">{{ $formatDateTime(meetingInfo.meeting_time, 'datetime') }}</div>
						</div>
						<div class="info_row">
							<div class="info_label">{{ t('meetingVenueLabel') }}：</div>
							<div class="info_value">{{ $getBilingualText(meetingInfo.meeting_venue) }}</div>
						</div>
					</div>
				</div>

				<!-- 注册类型选择 -->
				<div class="section_card registration_types_card">
					<h3 class="section_title">
						<span class="title_icon">*</span>
						{{ t('registrationType') }}
					</h3>
					<div class="registration_types">
						<div 
							v-for="type in registrationTypes" 
							:key="type.value"
							class="type_option"
							:class="{ selected: selectedType === type.value }"
							@click="selectType(type.value)">
							<div class="type_header">
								<div class="type_name">{{ type.name }}</div>
								<div class="type_price">¥ {{ type.price }}</div>
							</div>
							<div class="type_deadline">{{ t('registrationDeadline') }}: {{ type.deadline }}</div>
						</div>
					</div>
				</div>

				<!-- 参会人信息 -->
				<div class="section_card attendees_card">
					<h3 class="section_title">
						<span class="title_icon">👥</span>
						{{ t('attendeeInfo') }}
					</h3>
					
					<!-- 参会人列表 -->
					<div v-for="(attendee, index) in attendees" :key="index" class="attendee_form_group">
						<div class="attendee_header">
							<h4 class="attendee_number">
								<span class="number_badge">{{ index + 1 }}</span>
								<span>{{ t('attendee') }}</span>
							</h4>
							<button 
								v-if="attendees.length > 1" 
								class="btn_remove_attendee"
								@click="removeAttendee(index)">
								{{ t('delete') }}
							</button>
						</div>

						<div class="form_grid">
							<div class="form_field">
								<label><span class="required">*</span>{{ t('name') }}:</label>
								<input 
									v-model="attendee.name" 
									type="text" 
									:placeholder="t('name')" />
							</div>

							<div class="form_field">
								<label><span class="required">*</span>{{ t('phone') }}:</label>
								<div class="phone_input_group">
									<select v-model="attendee.phoneCode" class="phone_code">
										<option value="+86">+86</option>
										<option value="+1">+1</option>
										<option value="+44">+44</option>
									</select>
									<input 
										v-model="attendee.phone" 
										type="text" 
										:placeholder="t('phone')" />
								</div>
							</div>

							<div class="form_field">
								<label><span class="required">*</span>{{ t('workUnit') }}:</label>
								<input 
									v-model="attendee.affiliation" 
									type="text" 
									:placeholder="t('workUnit')" />
							</div>

							<div class="form_field" v-if="selectedType === 'poster' || selectedType === 'oral'">
								<label>
									<span class="required">*</span>
									{{ t('speechTitle') }} (for Oral/Poster Presentation):
								</label>
								<input 
									v-model="attendee.speechTitle" 
									type="text" 
									:placeholder="t('speechTitle')" />
							</div>

							<div class="form_field" v-if="selectedType === 'poster' || selectedType === 'oral'">
								<label><span class="required">*</span>{{ t('affiliation') }}:</label>
								<input 
									v-model="attendee.affiliationEn" 
									type="text" 
									:placeholder="t('affiliation')" />
							</div>

							<div class="form_field" v-if="selectedType === 'poster' || selectedType === 'oral'">
								<label><span class="required">*</span>{{ t('title') }}:</label>
								<input 
									v-model="attendee.title" 
									type="text" 
									:placeholder="t('title')" />
							</div>

							<div class="form_field">
								<label>{{ t('wechat') }}:</label>
								<input 
									v-model="attendee.wechat" 
									type="text" 
									:placeholder="t('wechat')" />
							</div>

							<div class="form_field">
								<label><span class="required">*</span>{{ t('participationType') }}:</label>
								<div class="radio_group">
									<label class="radio_option">
										<input 
											type="radio" 
											:name="'participationType_' + index" 
											value="online" 
											v-model="attendee.participationType" />
										<span>{{ t('online') }}</span>
									</label>
									<label class="radio_option">
										<input 
											type="radio" 
											:name="'participationType_' + index" 
											value="onsite" 
											v-model="attendee.participationType" />
										<span>{{ t('onsite') }}</span>
									</label>
								</div>
							</div>

							<div class="form_field">
								<label class="checkbox_label">
									<input 
										type="checkbox" 
										v-model="attendee.accommodation" 
										:true-value="true"
										:false-value="false"
										class="checkbox_input" />
									<span class="checkbox_text">{{ t('needAccommodation') }}</span>
								</label>
							</div>
						</div>
					</div>

					<!-- 新增参会人按钮 -->
					<button class="btn_add_attendee" @click="addAttendee">
						<span class="icon">+</span>
						{{ t('addAttendee') }}
					</button>
				</div>

				<!-- 订单备注 -->
				<div class="section_card notes_card">
					<h3 class="section_title">
						<span class="title_icon">📝</span>
						{{ t('orderNotes') }}
					</h3>
					<textarea 
						v-model="orderNotes" 
						:placeholder="t('orderNotesPlaceholder')" 
						rows="4"></textarea>
				</div>

				<!-- 操作按钮 -->
				<div class="action_buttons">
					<button class="btn btn_secondary" @click="saveDraft">{{ t('saveDraft') }}</button>
					<button class="btn btn_primary" @click="submitOrder">{{ t('submit') }}</button>
				</div>
			</div>

			<!-- 右侧：订单信息 -->
			<div class="order_summary_section">
				<div class="order_summary_card">
					<h3 class="summary_title">{{ t('orderSummary') }}</h3>
					<div class="summary_item">
						<div class="summary_label">{{ t('meetingNameLabel') }}</div>
						<div class="summary_value">{{ $getBilingualText(meetingInfo.conference_name) }}</div>
					</div>
					<div class="summary_item">
						<div class="summary_label">{{ t('meetingTimeLabel') }}</div>
						<div class="summary_value">{{ $formatDateTime(meetingInfo.meeting_time, 'datetime') }}</div>
					</div>
					<div class="summary_item">
						<div class="summary_label">{{ t('attendeeCount') }}</div>
						<div class="summary_value highlight">{{ attendees.length }}</div>
					</div>
					<div class="summary_divider"></div>
					<div class="summary_item total">
						<div class="summary_label">
							<span class="icon">💰</span>
							{{ t('totalRegistrationFee') }}
						</div>
						<div class="summary_value price">¥ {{ totalAmount }}</div>
					</div>
				</div>

				<!-- 温馨提示 -->
				<div class="tips_card">
					<h4 class="tips_title">{{ t('tips') }}</h4>
					<ul class="tips_list">
						<li>{{ t('tipsInfo1') }}</li>
						<li>{{ t('tipsInfo2') }}</li>
						<li>{{ t('tipsInfo3') }}</li>
						<li>{{ t('tipsInfo4') }}</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import mixin from "@/mixins/page.js";
import mixinI18n from "@/mixins/i18n.js";

export default {
	mixins: [mixin, mixinI18n],
	data() {
		return {
			currentStep: 1,
			meetingInfo: {
				meeting_information_id: 0,
				conference_name: '',
				meeting_time: '',
				meeting_venue: '',
				amount_of_participation: 0
			},
			registrationTypes: [],
			selectedType: '',
			attendees: [
				{
					name: '',
					phoneCode: '+86',
					phone: '',
					affiliation: '',
					speechTitle: '',
					affiliationEn: '',
					title: '',
					wechat: '',
					participationType: 'onsite',
					accommodation: false
				}
			],
			orderNotes: '',
			
			url_get_meeting: "~/api/meeting_information/get_obj?",
		}
	},
	computed: {
		totalAmount() {
			const selectedTypeObj = this.registrationTypes.find(t => t.value === this.selectedType);
			const pricePerPerson = selectedTypeObj ? selectedTypeObj.price : 0;
			return pricePerPerson * this.attendees.length;
		}
	},
	methods: {
		async loadMeetingInfo() {
			const meeting_id = this.$route.query.meeting_information_id || this.$route.query.meeting_id;
			if (!meeting_id) {
				this.$message.error('未找到会议信息');
				return;
			}

			try {
				const json = await this.$get(this.url_get_meeting, {
					meeting_information_id: meeting_id
				});

				if (json.result && json.result.obj) {
					this.meetingInfo = json.result.obj;
					this.initRegistrationTypes();
				} else {
					this.$message.error('加载会议信息失败');
				}
			} catch (error) {
				console.error('加载会议信息失败:', error);
				this.$message.error('加载会议信息失败');
			}
		},

		initRegistrationTypes() {
			// 从后端获取独立的价格，如果没有则使用参会金额计算
			const basePrice = this.meetingInfo.amount_of_participation || 1500;
			const posterPrice = this.meetingInfo.price_poster || basePrice;
			const oralPrice = this.meetingInfo.price_oral || basePrice;
			const listenerPrice = this.meetingInfo.price_listener || Math.floor(basePrice * 0.8);
			
			this.registrationTypes = [
				{
					name: 'Poster Presentation/墙报展示',
					value: 'poster',
					price: posterPrice,
					deadline: '2025.10.31'
				},
				{
					name: 'Oral Presentation/口头报告',
					value: 'oral',
					price: oralPrice,
					deadline: '2025.10.31'
				},
				{
					name: 'Listener/听众',
					value: 'listener',
					price: listenerPrice,
					deadline: '2025.10.31'
				}
			];

			// 默认选择第一个
			if (this.registrationTypes.length > 0) {
				this.selectedType = this.registrationTypes[0].value;
			}
			
			console.log('=== 注册类型价格 ===');
			console.log('Poster价格:', posterPrice);
			console.log('Oral价格:', oralPrice);
			console.log('Listener价格:', listenerPrice);
		},

		selectType(type) {
			this.selectedType = type;
		},
		
		// 格式化日期时间
		formatDateTime(value) {
			if (!value) return '';
			// 如果是时间戳（数字）
			if (typeof value === 'number') {
				const date = new Date(value);
				if (isNaN(date.getTime())) {
					return value;
				}
				return this.formatDate(date);
			}
			// 如果是字符串，尝试解析
			if (typeof value === 'string') {
				// 如果是时间戳字符串
				if (/^\d{10,13}$/.test(value)) {
					const timestamp = value.length === 10 ? parseInt(value) * 1000 : parseInt(value);
					const date = new Date(timestamp);
					if (!isNaN(date.getTime())) {
						return this.formatDate(date);
					}
				}
				// 尝试解析日期字符串
				const date = new Date(value);
				if (!isNaN(date.getTime())) {
					return this.formatDate(date);
				}
				return value;
			}
			// 如果是Date对象
			if (value instanceof Date) {
				return this.formatDate(value);
			}
			return String(value);
		},
		// 格式化日期为可读字符串
		formatDate(date) {
			if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
				return '';
			}
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			const hours = String(date.getHours()).padStart(2, '0');
			const minutes = String(date.getMinutes()).padStart(2, '0');
			const seconds = String(date.getSeconds()).padStart(2, '0');
			return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		},

		addAttendee() {
			this.attendees.push({
				name: '',
				phoneCode: '+86',
				phone: '',
				affiliation: '',
				speechTitle: '',
				affiliationEn: '',
				title: '',
				wechat: '',
				participationType: 'onsite',
				accommodation: false
			});
		},

		removeAttendee(index) {
			if (this.attendees.length > 1) {
				this.attendees.splice(index, 1);
			}
		},

		validateForm() {
			// 验证注册类型
			if (!this.selectedType) {
				this.$message.error('请选择注册类型');
				return false;
			}

			// 验证参会人信息
			for (let i = 0; i < this.attendees.length; i++) {
				const attendee = this.attendees[i];
				if (!attendee.name) {
					this.$message.error(`第${i + 1}位参会人姓名不能为空`);
					return false;
				}
				if (!attendee.phone) {
					this.$message.error(`第${i + 1}位参会人手机号不能为空`);
					return false;
				}
				if (!attendee.affiliation) {
					this.$message.error(`第${i + 1}位参会人工作单位不能为空`);
					return false;
				}
				if ((this.selectedType === 'poster' || this.selectedType === 'oral') && !attendee.speechTitle) {
					this.$message.error(`第${i + 1}位参会人报告标题不能为空`);
					return false;
				}
			}

			return true;
		},

		async saveDraft() {
			// 保存草稿到本地存储
			const draftData = {
				meetingInfo: this.meetingInfo,
				selectedType: this.selectedType,
				attendees: this.attendees,
				orderNotes: this.orderNotes
			};
			localStorage.setItem('registration_draft', JSON.stringify(draftData));
			this.$message.success('草稿已保存');
		},

		async submitOrder() {
			if (!this.validateForm()) {
				return;
			}

			// 获取当前登录用户ID
			let user_id = this.$store.state.user && this.$store.state.user.user_id;
			if (!user_id || user_id === 0) {
				const token = $.db.get("token");
				if (token) {
					// 尝试获取用户信息
					try {
						await this.$get_user((user) => {
							user_id = user.user_id;
						});
					} catch (e) {
						console.warn('获取用户信息失败:', e);
					}
				}
			}

			if (!user_id || user_id === 0) {
				this.$message.error('请先登录后再提交报名');
				this.$router.push('/account/login');
				return;
			}

			try {
			// 提取第一个参会人姓名作为用户姓名（用于显示和查询）
			const firstAttendee = this.attendees && this.attendees.length > 0 ? this.attendees[0] : null;
			const userName = firstAttendee ? firstAttendee.name : '';
			
			// 提交参会报名（已移除冗余字段，只保留必要字段）
			const registrationData = {
				meeting_information_id: this.meetingInfo.meeting_information_id,
				registration_type: this.selectedType,
				amount_of_participation: this.totalAmount,
				attendees_data: JSON.stringify(this.attendees), // 参会人信息（后端会自动迁移到新表）
				order_notes: this.orderNotes,
				participants: user_id, // 关联当前登录用户（必须字段）
				accommodation_or_not: this.attendees.some(a => a.accommodation) ? 1 : 0, // 是否住宿
				pay_state: '未支付', // 初始支付状态（必须字段）
				examine_state: '未审核' // 初始审核状态（必须字段）
			};

			console.log('提交报名数据:', registrationData);
			console.log('关联用户ID (participants):', user_id);

			const json = await this.$post('~/api/user_participation/add?', registrationData);

			if (json.result) {
				this.$message.success('提交成功，正在跳转到支付页面...');
				// 清除草稿
				localStorage.removeItem('registration_draft');
				
				// 准备订单数据
				const orderData = {
					user_participation_id: json.result.user_participation_id,
					conference_name: this.meetingInfo.conference_name,
					meeting_type: this.meetingInfo.meeting_type,
					meeting_time: this.meetingInfo.meeting_time,
					meeting_venue: this.meetingInfo.meeting_venue,
					registration_type: this.selectedType,
					amount_of_participation: this.totalAmount,
					attendees_data: JSON.stringify(this.attendees),
					order_notes: this.orderNotes
				};
				
				// 跳转到支付页面
				setTimeout(() => {
					this.$router.push({
						path: '/user_participation/payment',
						query: {
							orderData: encodeURIComponent(JSON.stringify(orderData))
						}
					});
				}, 1000);
			} else {
				this.$message.error(json.error?.message || '提交失败');
			}
			} catch (error) {
				console.error('提交失败:', error);
				this.$message.error('提交失败，请重试');
			}
		},

		loadDraft() {
			const draftStr = localStorage.getItem('registration_draft');
			if (draftStr) {
				try {
					const draft = JSON.parse(draftStr);
					if (draft.meetingInfo && draft.meetingInfo.meeting_information_id === this.meetingInfo.meeting_information_id) {
						this.selectedType = draft.selectedType;
						this.attendees = draft.attendees;
						this.orderNotes = draft.orderNotes;
						this.$message.info('已加载上次保存的草稿');
					}
				} catch (e) {
					console.error('加载草稿失败:', e);
				}
			}
		}
	},
	async mounted() {
		await this.loadMeetingInfo();
		this.loadDraft();
	}
}
</script>

<style scoped>
.conference_registration_page {
	min-height: 100vh;
	background: #f5f7fa;
	padding-bottom: 4rem;
}

/* 步骤条 */
.steps_container {
	background: white;
	padding: 2rem 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	margin-bottom: 2rem;
}

.steps_wrapper {
	max-width: 600px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.step_item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	flex: 0 0 auto;
}

.step_number {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #e0e0e0;
	color: #999;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 1.1rem;
	transition: all 0.3s;
}

.step_item.active .step_number {
	background: #5DADE2;
	color: white;
}

.step_item.completed .step_number {
	background: #27AE60;
	color: white;
}

.step_label {
	font-size: 0.9rem;
	color: #666;
	transition: all 0.3s;
}

.step_item.active .step_label {
	color: #5DADE2;
	font-weight: 600;
}

.step_line {
	flex: 1;
	height: 2px;
	background: #e0e0e0;
	margin: 0 1rem;
	transition: all 0.3s;
}

.step_line.active {
	background: #5DADE2;
}

/* 内容区域 */
.content_wrapper {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 2rem;
	display: flex;
	gap: 2rem;
	align-items: flex-start;
}

.form_section {
	flex: 1;
	min-width: 0;
}

.order_summary_section {
	width: 350px;
	flex-shrink: 0;
	position: sticky;
	top: 2rem;
}

/* 卡片样式 */
.section_card {
	background: white;
	border-radius: 0.75rem;
	padding: 2rem;
	margin-bottom: 1.5rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.section_title {
	font-size: 1.3rem;
	font-weight: 600;
	color: #2c3e50;
	margin-bottom: 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border-bottom: 2px solid #f0f0f0;
	padding-bottom: 0.75rem;
}

.title_icon {
	font-size: 1.5rem;
}

.required {
	color: #e74c3c;
	margin-right: 4px;
}

/* 会议信息 */
.meeting_basic_info {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.info_row {
	display: flex;
	align-items: center;
	font-size: 0.95rem;
}

.info_label {
	color: #666;
	min-width: 90px;
	font-weight: 500;
}

.info_value {
	color: #333;
	flex: 1;
}

/* 注册类型 */
.registration_types {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
}

.type_option {
	border: 2px solid #e0e0e0;
	border-radius: 0.5rem;
	padding: 1.25rem;
	cursor: pointer;
	transition: all 0.3s;
	background: white;
}

.type_option:hover {
	border-color: #5DADE2;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(93, 173, 226, 0.2);
}

.type_option.selected {
	border-color: #5DADE2;
	background: #EBF5FB;
}

.type_header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
}

.type_name {
	font-weight: 600;
	color: #2c3e50;
	font-size: 0.95rem;
}

.type_price {
	font-size: 1.2rem;
	font-weight: 700;
	color: #5DADE2;
}

.type_deadline {
	font-size: 0.85rem;
	color: #999;
}

/* 参会人表单 */
.attendee_form_group {
	border: 1px solid #e0e0e0;
	border-radius: 0.5rem;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	background: #fafafa;
}

.attendee_header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #e0e0e0;
}

.attendee_number {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.1rem;
	font-weight: 600;
	color: #2c3e50;
	margin: 0;
}

.number_badge {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #5DADE2;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
}

.btn_remove_attendee {
	padding: 0.5rem 1rem;
	border: 1px solid #e74c3c;
	background: white;
	color: #e74c3c;
	border-radius: 0.25rem;
	cursor: pointer;
	font-size: 0.9rem;
	transition: all 0.3s;
}

.btn_remove_attendee:hover {
	background: #e74c3c;
	color: white;
}

.form_grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.25rem;
}

.form_field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.form_field label {
	font-size: 0.9rem;
	font-weight: 500;
	color: #555;
}

.form_field input,
.form_field select {
	padding: 0.75rem;
	border: 1px solid #ddd;
	border-radius: 0.375rem;
	font-size: 0.95rem;
	transition: all 0.3s;
	background: white;
}

.form_field input:focus,
.form_field select:focus {
	outline: none;
	border-color: #5DADE2;
	box-shadow: 0 0 0 3px rgba(93, 173, 226, 0.1);
}

.phone_input_group {
	display: flex;
	gap: 0.5rem;
}

.phone_code {
	width: 90px;
	flex-shrink: 0;
}

.radio_group {
	display: flex;
	gap: 1.5rem;
	padding-top: 0.25rem;
}

.radio_option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}

.radio_option input[type="radio"] {
	width: 18px;
	height: 18px;
	cursor: pointer;
}

.btn_add_attendee {
	width: 100%;
	padding: 1rem;
	border: 2px dashed #5DADE2;
	background: white;
	color: #5DADE2;
	border-radius: 0.5rem;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	transition: all 0.3s;
}

.btn_add_attendee:hover {
	background: #EBF5FB;
	border-color: #3498DB;
	color: #3498DB;
}

.btn_add_attendee .icon {
	font-size: 1.5rem;
}

/* 订单备注 */
.notes_card textarea {
	width: 100%;
	padding: 0.75rem;
	border: 1px solid #ddd;
	border-radius: 0.375rem;
	font-size: 0.95rem;
	font-family: inherit;
	resize: vertical;
	transition: all 0.3s;
}

.notes_card textarea:focus {
	outline: none;
	border-color: #5DADE2;
	box-shadow: 0 0 0 3px rgba(93, 173, 226, 0.1);
}

/* 操作按钮 */
.action_buttons {
	display: flex;
	gap: 1rem;
	justify-content: center;
}

.btn {
	padding: 1rem 3rem;
	border: none;
	border-radius: 0.5rem;
	font-size: 1.05rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s;
}

.btn_secondary {
	background: #ecf0f1;
	color: #555;
}

.btn_secondary:hover {
	background: #bdc3c7;
}

.btn_primary {
	background: #5DADE2;
	color: white;
}

.btn_primary:hover {
	background: #3498DB;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

/* 订单摘要 */
.order_summary_card {
	background: white;
	border-radius: 0.75rem;
	padding: 2rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	margin-bottom: 1.5rem;
}

.summary_title {
	font-size: 1.3rem;
	font-weight: 600;
	color: #2c3e50;
	margin-bottom: 1.5rem;
	text-align: center;
	padding-bottom: 1rem;
	border-bottom: 2px solid #f0f0f0;
}

.summary_item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem 0;
	font-size: 0.95rem;
}

.summary_label {
	color: #666;
}

.summary_value {
	color: #333;
	font-weight: 500;
}

.summary_value.highlight {
	color: #5DADE2;
	font-weight: 700;
	font-size: 1.2rem;
}

.summary_divider {
	height: 1px;
	background: #e0e0e0;
	margin: 1rem 0;
}

.summary_item.total {
	padding: 1rem 0;
	margin-top: 0.5rem;
}

.summary_item.total .summary_label {
	font-weight: 600;
	color: #2c3e50;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.summary_value.price {
	font-size: 1.5rem;
	font-weight: 700;
	color: #e74c3c;
}

/* 温馨提示 */
.tips_card {
	background: #FFF9E6;
	border: 1px solid #FFE082;
	border-radius: 0.75rem;
	padding: 1.5rem;
}

.tips_title {
	font-size: 1rem;
	font-weight: 600;
	color: #F39C12;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.tips_title::before {
	content: '💡';
	font-size: 1.2rem;
}

.tips_list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.tips_list li {
	font-size: 0.85rem;
	color: #856404;
	padding-left: 1.5rem;
	position: relative;
}

.tips_list li::before {
	content: '•';
	position: absolute;
	left: 0.5rem;
	color: #F39C12;
	font-weight: bold;
}

/* 响应式 */
@media (max-width: 1024px) {
	.content_wrapper {
		flex-direction: column;
	}

	.order_summary_section {
		width: 100%;
		position: static;
	}
}

@media (max-width: 768px) {
	.content_wrapper {
		padding: 0 1rem;
	}

	.section_card {
		padding: 1.5rem;
	}

	.registration_types {
		grid-template-columns: 1fr;
	}

	.form_grid {
		grid-template-columns: 1fr;
	}

	.action_buttons {
		flex-direction: column;
	}

	.btn {
		width: 100%;
	}

	.steps_wrapper {
		padding: 0 1rem;
	}

	.step_label {
		font-size: 0.8rem;
	}
}
</style>

